<template>
  <view>
    <image
    @click="goBack()"
    class="back"
      src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_fanhui@3x.png"
    />
    <image
    class="xinshou"
      src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_xinshou@3x.png"
      mode="scaleToFill"
    />

    <view class="bottom" >
			<stepss :options="list" active-color="rgba(142,84,244,1)" :active="active" direction="column" />
      <button @click="goto()" class="btn" v-if="active!=3">{{text}}</button>
      <text v-else class="text">去制作更多爆款视频吧~</text>
    </view>
  </view>
</template>

<script>
import Stepss from '../../components/components/uni-steps_1.1.1/components/uni-steps/stepss.vue'
export default {
    name: 'UniPresetVueVite1SetpBar',
    components:{
      Stepss
    },
    data() {
        return {
            list:[{
				          	title: '创建店铺',
				          	desc: '创建店铺选择行业，会自动匹配相关脚本，文案，音乐，推广标题'
				          }, {
				          	title: '制作视频',
				          	desc: '店店有客为您生成大量AI资料素材，助力打造爆款视频'
				          }, {
				          	title: '发布视频',
				          	desc: '可选择二维码发布视频，一键发送抖音平台、定时发送爆款视频、保存视频等功能'
				          }],
            active:0,
        };
    },
    onLoad(options) {
      this.getActive()
      console.log(this.active);
    },
    methods: {
      goBack(){
        uni.navigateBack({ delta: 1 })
      },
      getActive(){
        if(uni.getStorageSync('shop').length){
          if(uni.getStorageSync('video')){
            if(uni.getStorageSync('publish')){
              this.active = 2
            }else{
              this.active = 1
            }
          }else{
            this.active = 0
          }
        }else{
          this.active = -1
        }
      },
      goto(){
        if(this.active == -1)return uni.navigateTo({ url: '/pageC/index/shop' })
        if(this.active == 0){
          uni.setStorageSync('bottom',1)
          return uni.switchTab({ url: `/pages/index/index` })
        }
        if(this.active == 1)return uni.navigateTo({ url: `/pageA/index/videos?index=${uni.getStorageSync('index')}&shopId=${uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId}` })
      }    
    },
    computed:{
      text(){
        if(this.active==-1)return '去创建店铺'
        if(this.active==0)return '去制作视频'
        if(this.active==1)return '去发布视频'
      }
    }
};
</script>

<style lang="scss" scoped>
  .back{
    position: absolute;
    top: 80rpx;
    left: 16rpx;
    width: 48rpx;
    height: 48rpx;

  }
  .xinshou{
    width: 100%;
    height: 422rpx;
  }
  .bottom{
    position: absolute;
    top: 355rpx;
    left: 0;
    height: 1194rpx;
    width: 100%;
    background-color: #fff;
   border-radius: 42rpx 42rpx 0 0;
   padding: 24rpx 26rpx 0 28rpx;
    box-sizing: border-box;
    .btn{
      width: 686rpx;
      height: 88rpx;
      background-color: rgba(142,84,244,1);
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 428rpx;
      margin-top: 32rpx;
      
    }
    .text{
      width: 100%;
      text-align: center;
      font-size: 28rpx;
      color: rgba(144,147,153,1);
      margin-top: 32rpx;
    }
  }
</style>